<template>
   <div class="case-container scroll">
            <!-- <div class="case-index-title">
                <h2>互联网大佬们都在使用的工具网站</h2>
                <a href="javascript:;">全部站点</a>
            </div> -->
            <iframe src="https://www.pmbaobao.com/" style="width: 100%;height: 100%;border: none;"></iframe>
            <!-- <div class="case-index-content">
                <ul class="clearfix">
                    <li class="case-example-item">
                        <a href="https://yiyan.baidu.com/">
                            <img src="./../assets/images/img001.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-001.jpg" alt=""></div>
                                <div class="case-info-title">Ai对话：文心一言</div>
                                <div class="case-info-text">我是百度研发的AI对话产品，是你的搜索AI伙伴，我可以为人类提供信息解决问题，比如回答问题，提供定义、解释和建议，也可以辅助人类进行创作产生新的内容，如文本生成、文本改写等。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="https://tu.360.cn/">
                            <img src="./../assets/images/360.png" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-002.jpg" alt=""></div>
                                <div class="case-info-title">Ai画图：360鸿图</div>
                                <div class="case-info-text">目前免费，可以更具关键词画图，关键词越准确画的越逼真，快去试试吧~360鸿图是360集团推出的AI绘画创作大模型，它支持CG、写实、动漫、剪纸等多种风格的图片生成。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img003.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-003.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：电脑／配件</div>
                                <div class="case-info-text">雷神科技是一家致力于专业游戏装备的互联网公司，向玩家提供国际一流品质和性能的游戏本。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img004.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-004.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：医药</div>
                                <div class="case-info-text">易索药房，专注于终端药店的O2O平台，让商家专业卖药，让患者科学用药提供便捷的远程药事服务电子处方支持。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img005.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-005.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：图书发行、批发零售</div>
                                <div class="case-info-text">聊城市鲁西图书销售有限公司是民营图书发行公司，经营范围涵盖图书发行、批发、零售，仓储，物流。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img006.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-006.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：农产品</div>
                                <div class="case-info-text">定位于B2B和B2C运营模式，目的在于整合特色农产品，通过平台进行分拣包装、交易配送。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img007.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-007.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：文化艺术品</div>
                                <div class="case-info-text">由辽宁文博艺术品产权交易中心打造，为文化艺术品爱好者提供安全的网上交易服务。</div>
                            </div>
                        </a>
                    </li>
                    <li class="case-example-item">
                        <a href="#">
                            <img src="./../assets/images/img008.jpg" alt="" class="case-pad">
                            <div class="case-item-info">
                                <div class="case-info-logo"><img src="./../assets/images/logo-008.jpg" alt=""></div>
                                <div class="case-info-title">经营类目：生活服务</div>
                                <div class="case-info-text">盟友88致力于为用户打造“电商＋店商＋点商”的“B2C+O2O”智能生活服务平台。</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div> -->
        </div>
  </template>
  <script setup>
  import { ref } from 'vue' // 从 Vue 中导入 ref 和 vueVersion
  const isCollapsed = ref(false)

  </script>
  
  <style scoped>
  iframe #header {
    display: none;
  }
  /* 公共样式表css */
html, body {
	color: #333;
	margin: 0;
	height: 100%;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color: #000;
}
img {
	border: 0;
}
body {
	background: #F4F5F9;
	color: #666;
}
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
	color: #08acee;
}
button {
	outline: 0;
}
img {
	border: 0;
}
button, input, optgroup, select, textarea {
	margin: 0;
	font: inherit;
	color: inherit;
	outline: none;
}
li {
	list-style: none;
}
a {
	color: #666;
}
a:hover {
	color: #eee;
}
.clearfix::after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix {
}
/* 必要布局样式css */
.case-container {
	width: 100%;
    height: 100%;
    overflow: auto;
	margin: 0 auto;
	padding: 0;
    
}
.case-index-title {
	font-size: 16px;
	text-align: center;
	padding: 50px 0;
}
.case-index-title h2 {
	font-size: 36px;
	font-family: pingfang, "Microsoft Yahei", "HanHei SC", PingHei, "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
	font-weight: normal;
}
.case-index-title a {
	width: 100px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #DBDCE0;
	text-align: center;
	font-size: 14px;
	display: block;
	margin: 25px auto 0;
	transition: all .2s;
}
.case-index-title a:hover {
	background: #F96A69;
	border-color: #F96A69;
	color: #fff;
}
.case-index-content {
	position: relative;
    width: 1240px;
    padding: 0 20px;
    margin: 20px auto;
}
.case-index-content ul {
	margin-right: -18px;
}
.case-example-item {
	float: left;
	width: 286px;
	height: 315px;
	overflow: hidden;
	margin: 0 18px 18px 0;
	text-align: center;
	background: #fff;
	position: relative;
	transition: all .2s;
}
.case-example-item a .case-pad {
	width: 286px;
	height: 180px;
}
.case-item-info {
	height: 135px;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	transition: all .2s;
}
.case-info-logo {
	margin-top: 0;
	margin-bottom: 8px;
	height: 80px;
	transition: all .2s;
}
img {
    height: 100%;
}
.case-info-title {
	font-size: 14px;
	color: #646466;
	margin-bottom: 35px;
}
.case-info-text {
	font-size: 14px;
	color: #666;
	padding: 0 30px;
	text-align: left;
	line-height: 1.8;
} 
.case-index-content .case-example-item:hover .case-item-info {
	height: 315px;
}
@media screen and (max-width: 1400px) {
    .case-example-item {
	width: 250px;

}
    .case-example-item a .case-pad {
		width: 250px;
}  
}
  </style>